<template>
    <!-- 头像组件 -->
    <div class="Avatar"><BaseAvatar/></div>
    <!-- 面板信息组件 -->
    <div class="layout">
        <div class="title">欢迎访问田中笠农产品商城</div>
        <BaseComponents v-for=" item in data" :item="item" :key="item"/>
    </div>
</template>

<script setup>
import BaseComponents from './BaseComponents.vue';
import BaseAvatar from './BaseAvatar.vue';
import data  from '../db/data.js'

</script>

<style lang="scss">

    .layout{
        .title{
            width: 100%;
            text-align: center;
            color: aliceblue;
            font-size: 22px;
            margin-bottom: 15px;
        }
        transform: translateY(100px);
        width: 95%;
        height: 280px;
        background-color: #10337864;
        border-radius: 20px;
        padding-top: 20px;
    }

</style>